<template>
    <div class="edit-web-page">
        <el-dialog v-model="dialogVisible" :title="getTitle" align-center center width="800" class="mobile-dialog">
            <el-form :model="dataForm" label-width="auto" v-loading="loading" ref="ruleFormRef" :rules="rules" :disabled="isRead">
                <el-form-item :label="$t('mod.announcement.dialog.label_1')" size="large" prop="title">
                    <el-input v-model="dataForm.title" :placeholder="$t('mod.announcement.dialog.rules_1')" />
                </el-form-item>
                <el-form-item :label="$t('mod.announcement.dialog.label_2')" size="large" prop="description">
                    <RichTextEditor v-model="dataForm.description" @update-richValue="relDescription($event)" :disabled="isRead" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button color="#F06423" @click="submitForm(ruleFormRef)" :loading="loading" v-if="isRead == false">{{ $t('golbal.btn_text_4') }}</el-button>
                <el-button @click="closeAction(ruleFormRef)" color="#435764">{{ $t('golbal.btn_text_5') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed } from 'vue'

import { useI18n } from 'vue-i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'
const { locale, t } = useI18n<{ message: MessageSchema }, SupportedLocales>()
import RichTextEditor from '@/components/RichTextEditor.vue'
import type { FormInstance, FormRules } from 'element-plus'
import SiteInfoService from '@/api/siteInfo'
// 父组件传进来的参数
const props = defineProps<{
    type: Number
    title?: string
}>()
const emit = defineEmits(['relRefresh'])
const loading = ref(false)
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const dataForm = reactive({
    title: '',
    description: '',
    type: props.type,
})
// 自定义验证规则
const rules = reactive({
    title: [{ required: true, message: t('mod.announcement.dialog.rules_1'), trigger: 'blur' }],
    description: [{ required: true, message: t('mod.announcement.dialog.rules_2'), trigger: 'blur' }],
})
const isRead = ref(false) //是否只读
const rowId = ref(0) // 当前行ID
const actionType = ref('add') // 当前操作类型
// 初始化弹窗数据
const initDialog = (action = 'add', id: any) => {
    rowId.value = id
    actionType.value = action
    dataForm.title = ''
    dataForm.description = ''
    dialogVisible.value = true
    if (action == 'edit' || action == 'detail') {
        getDetailInfo(id)
    }
    if (action == 'detail') {
        isRead.value = true
    } else {
        isRead.value = false
    }
}
defineExpose({
    initDialog,
})

const getTitle = computed(() => {
    if(actionType.value == 'add') {
        return t('mod.announcement.index.action_button_txt4') + props.title
    }else if(actionType.value == 'edit'){
        return t('mod.announcement.index.action_button_txt2') + props.title
    } else {
        return props.title + t('mod.announcement.index.action_button_txt1')
    }
})

// 获取详细信息
const getDetailInfo = (id: number) => {
    SiteInfoService.info(id).then(res => {
        dataForm.title = res.title || ''
        dataForm.description = res.description || ''
    })
}

// 表单提交
const submitForm = async (formEl: { validate: (arg0: (valid: any, fields: any) => void) => any }) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit success!', dataForm)
            loading.value = true
            if (actionType.value == 'edit') {
                // 编辑
                SiteInfoService.editAction(rowId.value, dataForm)
                    .then(res => {
                        if (ruleFormRef.value) {
                            closeAction(ruleFormRef.value)
                            emit('relRefresh')
                        }
                    })
                    .finally(() => {
                        loading.value = false
                    })
            } else if (actionType.value == 'add') {
                // 新增
                SiteInfoService.addAction(dataForm)
                    .then(res => {
                        if (ruleFormRef.value) {
                            closeAction(ruleFormRef.value)
                            emit('relRefresh')
                        }
                    })
                    .finally(() => {
                        loading.value = false
                    })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭弹窗
const closeAction = (formEl: { resetFields: () => void }) => {
    if (!formEl) return
    formEl.resetFields()
    dialogVisible.value = false
}

// 获取富文本返回的内容
const relDescription = (value: string) => {
    dataForm.description = value
}

onMounted(() => {})
</script>

<style scoped lang="less"></style>
